<template>
    <div class="video">

        <!--S视频-->
        <video
                id="video"
                ref="video"
                :src="src"
                :poster="video_thumb"
                :loop="loop"
                @timeupdate="timeupdate"
                @click="clickRed"
                @ended="ended"
                x5-video-player-type="h5-page"
                webkit-playsinline
                playsinline
        >
        </video>
        <!--E视频-->

        <!--S进度条-->
        <div id="progress"><span :style="{transform:'translateX('+progress+'%)'}"></span></div>
        <!--E进度条-->

        <!--S暂停图标-->
        <div id="pause" v-show="pause" @click="clickRed">
            <svg class="icon" aria-hidden="true"><use xlink:href="#icon-danqubofangicon-"></use></svg>
        </div>
        <!--E暂停图标-->

        <!--S红包-->
        <red
                v-show="show_red"
                :red-id="redId"
                red-type="video"
                :total-count="total_count"
                :now-count="now_count"
                :video-complete="video_complete"
                @loaded="loaded"
                @open-video="player"
                @click-red="clickRed"
                @close="closeRed"
                @qa-reset="qaRest">
        </red>
        <!--E红包-->

        <!--右下角控制--><control :red-id="redId" :owner="owner"></control>

        <!--S左下角信息-->
        <left-bottom
                :data="data"
                v-if="data && data.status.status">
        </left-bottom>
        <!--E左下角信息-->

        <!---周围背景--><around-bg></around-bg>

        <!--S推广链接-->
        <link-btn v-if="link && show_red"
                  :link="link">
        </link-btn>
        <!--E推广链接-->
    </div>
</template>

<script>
    import AroundBg from "../around-bg/AroundBg";
    import red from "../red/Red";
    import control from "../control/Control";
    import leftBottom from "../left-bottom/LeftBottom";
    import linkBtn from "../link-btn/LinkBtn";
    export default {
        name: "IVideo",
        data(){
          return {
              show_red:true,  //是否显示红包
              data:null,  //红包数据
              owner:"",  //红包所属用户id
              src:"",  //视频src地址
              video_thumb:"",   //视频封面
              total_count:0,  //视频总长度
              now_count:0,  //当前视频时长
              progress:0,  //进度条
              pause:false,   //是否暂停
              video_complete:false,  //视频是否播放完成,并且红包未打开
              loop:false,  //是否循环播放
              link:null,  //推广链接
          }
        },
        props:{
            //红包id
            redId:{
                type:String
            },
            /**
             * 当前的红包id,用于检测视频切换事件
             */
            changeRedId:{
                type:String
            }
        },
        watch:{
            //红包切换
            changeRedId(value){
                this.resetRed(value);
            },
            "$route"(){
                this.$refs.video.pause();
                this.pause = true;
            }
        },
        components:{
            "around-bg":AroundBg,
            red,
            control,
            "left-bottom":leftBottom,
            "link-btn":linkBtn
        },
        mounted() {
          this.getDuration();
        },
        methods:{
            //run
            /**
             * 红包加载完成
             * @param data
             */
            loaded(data){
                this.src = data.src[0];
                this.video_thumb = data.video_thumb;
                this.data = data;
                this.owner = data.uid;
                if(data.link) this.link = data.link;
                if(data.status.status === 5){
                    this.show_red = false;
                    this.pause = true;
                    this.loop = true;
                }
            },
            /**
             * 获取视频长度
             */
            getDuration(){
                this.$refs.video.ondurationchange = ()=>{
                    this.total_count = parseInt(this.$refs.video.duration);
                }
            },

            //Handle
            /**
             * 开启视频红包，开始播放视频
             */
            player(){
                this.pause = false;
                this.$refs.video.play();
            },
            /**
             * 视频播放中
             */
            timeupdate(){
                this.now_count = this.$refs.video.currentTime;
                let temp_progress = Math.ceil(this.$refs.video.currentTime/this.total_count*100)
                if(temp_progress <= 100){
                    this.progress = temp_progress;
                }
            },
            /**
             * 视频播放完成
             */
            ended(){
                this.video_complete = true;
            },
            /**
             * 点击视频video
             */
            clickRed(status){
                if(this.pause && (status === "opening" || this.data.status.status)){
                    this.$refs.video.play();
                    this.pause = false;
                }else{
                    this.$refs.video.pause();
                    this.pause = true;
                }
            },
            /**
             * 重置红包
             */
            resetRed(value){
                if(value !== this.redId){
                    this.pause = true;
                    this.$refs.video.pause();
                }
            },
            /**
             * 关闭隐藏红包
             */
            closeRed(){
                this.data.status.status = 5;
                this.show_red = false;
                this.loop = true;
            },
            //问答红包重开
            qaRest(){
                this.video_complete = false;
            }
        }
    }
</script>

<style scoped lang="less" src="./ivideo.less"></style>
